<template>
  <div class="book-home">
    <search-bar @showFlapCard="showFlapCard"
                :ifShowSearchPage.sync="ifShowSearchPage"
                :ifShowHotSearch.sync="ifShowHotSearch"
                :bookListOffsetY="bookListOffsetY"
                @back="onBack"
                ref="searchBar"></search-bar>
    <div class="book-list-wrapper" v-show="!ifShowSearchPage || !ifShowHotSearch" ref="bookListWrapper">
      <div class="banner-wrapper">
        <div class="banner" :style="bannerStyle"></div>
      </div>
      <guess-you-like :data="guessYouLike" ref="guessYouLike"></guess-you-like>
      <recommend class="recommend" :data="recommend" ref="recommend"></recommend>
      <featured class="featured" :data="featured" :titleText="$t('home.featured')" :btnText="$t('home.seeAll')"
                ref="featured"></featured>
      <div class="category-list-wrapper" v-for="(item, index) in categoryList" :key="index">
        <category-book :data="item"></category-book>
      </div>
      <category class="category" :data="categories"></category>
    </div>
    <flap-card v-if="ifFlapCardShow"
               @close="closeFlapCard"
               :data="random"
               ref="flapCard"></flap-card>
  </div>
</template>

<script type="text/ecmascript-6">
  import FlapCard from '@/components/home/flapCard'
  import SearchBar from '@/components/home/searchBar'
  import GuessYouLike from '@/components/home/guessYouLike'
  import Recommend from '@/components/home/recommend'
  import Featured from '@/components/home/featured'
  import CategoryBook from '@/components/home/categoryBook'
  import Category from '@/components/home/category'
  import { home2 } from '@/api/book'
  import { realPx } from '@/utils/utils'
  import { getLocalStorage, setLocalStorage, getHome, saveHome } from '@/utils/localStorage'

  export default {
    components: {
      Category,
      CategoryBook,
      Featured,
      FlapCard,
      SearchBar,
      GuessYouLike,
      Recommend
    },
    data() {
      return {
        isBack: false,
        ifFlapCardShow: false,
        ifShowSearchPage: false,
        ifShowHotSearch: true,
        data: null,
        guessYouLike: null,
        bannerStyle: null,
        recommend: null,
        featured: null,
        categoryList: null,
        categories: null,
        random: null,
        randomList: null,
        bookListOffsetY: 0
      }
    },
    methods: {
      onBack() {
        this.isBack = true
      },
      handleBookListScroll(e) {
        const target = e.target
        if (target) {
          this.bookListOffsetY = target.scrollTop
          if (target.scrollTop > 0) {
            if (this.$refs.searchBar) {
              this.$refs.searchBar.showSearchPage()
              this.$refs.searchBar.showShadow()
              this.ifShowHotSearch = false
            }
          } else {
            if (this.$refs.searchBar) {
              this.$refs.searchBar.hideSearchPage()
            }
          }
        }
      },
      showFlapCard() {
        this.ifFlapCardShow = true
        const randomNumber = parseInt(Math.random() * this.randomList.length)
        this.random = this.randomList[randomNumber]
        this.$nextTick(() => {
          this.$refs.flapCard.startAnimation()
        })
      },
      closeFlapCard() {
        this.$refs.flapCard.stopAnimation()
        this.ifFlapCardShow = false
      },
      parseHomeData(data) {
        this.data = data
        this.guessYouLike = data.guessYouLike
        this.recommend = data.recommend
        this.featured = data.featured
        this.categoryList = data.categoryList
        this.categories = data.categories
        this.randomList = data.random
        this.bannerStyle = {
          backgroundImage: 'url(' + data.banner + ')'
        }
        this.$nextTick(() => {
          if (this.bookListOffsetY) {
            this.$refs.bookListWrapper.scrollTo(0, this.bookListOffsetY)
          }
        })
      }
    },
    mounted() {
      const home = getHome()
      if (home) {
        this.parseHomeData(home)
      } else {
        home2().then(response => {
          if (response.status === 200 && response.data) {
            this.parseHomeData(response.data)
            saveHome(response.data)
          }
        })
      }
      this.$refs.bookListWrapper.style.height = window.innerHeight - realPx(52) + 'px'
      this.$refs.bookListWrapper.addEventListener('scroll', this.handleBookListScroll)
      this.bookListOffsetY = getLocalStorage('offsetY')
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        if (from.path === '/book-store/list' && from.query.keyword) {
          vm.ifShowSearchPage = true
          vm.$refs.searchBar.setKeyword(from.query.keyword)
        }
      })
    },
    beforeDestroy() {
      if (this.bookListOffsetY && !this.isBack) {
        setLocalStorage('offsetY', this.bookListOffsetY)
      } else {
        setLocalStorage('offsetY', 0)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";

  .book-home {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    font-size: px2rem(16);
    color: #666;
    .book-list-wrapper {
      width: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        display: none;
      }
      .banner-wrapper {
        width: 100%;
        padding: px2rem(10);
        box-sizing: border-box;
        .banner {
          width: 100%;
          height: px2rem(150);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .recommend {
        margin-top: px2rem(20);
      }
      .featured {
        margin-top: px2rem(20);
      }
      .category-list-wrapper {
        margin-top: px2rem(20);
      }
      .category {
        margin-top: px2rem(20);
      }
    }
  }
</style>
